import React,{memo} from 'react';

import {DisCoverWrapper} from "./style";
import {DiscoverLinks} from "../../common/local-data";
import {NavLink, Route, Switch} from "react-router-dom";

//导入组件
import recommend from "./c-pages/recommend";
import newdisc from "./c-pages/newdisc";
import radio from "./c-pages/radio";
import ranking from "./c-pages/ranking";
import singer from "./c-pages/singer";
import songs from "./c-pages/songs";


export default memo(function Discover(props) {
  //路由中的三大属性，当我们使用 renderRoutes 时，就可以通过props来获取三大属性
    return (
        <DisCoverWrapper>
          {/*路由*/}
          <div className="discover_head">
            <ul>
              {
                DiscoverLinks.map((item)=>{
                  return (
                  <li key={item.link}>
                    <NavLink className="mya" to={item.link}>{item.title}</NavLink>
                  </li>
                  )
                })
              }
            </ul>
           </div>

           <Switch>
             <Route exact={true} path="/discover/recommend" component={recommend}/>
             <Route  path="/discover/ranking" component={ranking}/>
             <Route  path="/discover/songs" component={songs}/>
             <Route  path="/discover/radio" component={radio}/>
             <Route  path="/discover/singer" component={singer}/>
             <Route  path="/discover/newdisc" component={newdisc}/>
           </Switch>

        </DisCoverWrapper>
    );
  }
)
